<template>
  <div>
    {{ title }}
  </div>

  <div>
    <ElForm :inline="true">
      <ElFormItem>
        <ElInput v-model="queryAInfo.cname" placeholder="班级模糊查询"> </ElInput>
      </ElFormItem>
      <ElFormItem>
        <ElButton v-loading="loading" @click="requery" type="primary">查询</ElButton>
        <ElButton v-loading="loading" @click="reset" type="danger">重置</ElButton>
        <ElButton @click="avisible = true" type="warning">添加</ElButton>
      </ElFormItem>
    </ElForm>
  </div>
  <div v-loading="loading">
    <ElTable :data="list" stripe border>
      <ElTableColumn prop="cname" label="班级名称"></ElTableColumn>
      <ElTableColumn prop="cinfo" label="班级描述"></ElTableColumn>
      <ElTableColumn label="信息修改时间">
        <template #default="scope">
          {{ Tools.formatDate(scope.row.lastupdate) }}
        </template>
      </ElTableColumn>
      <ElTableColumn label="操作">
        <template #default="scope">
          <ElButton @click="showModify(scope.row)" type="primary">修改</ElButton>
          <ElButton @click="del(scope.row)" type="danger">删除</ElButton>
        </template>
      </ElTableColumn>
    </ElTable>

    <ElPagination :total="page.total" v-model:page-size="page.pageSize" v-model:current-page="page.pageNumber" @current-change="query" @size-change="requery"></ElPagination>
  </div>

  <!-- 添加对话框 -->
  <ElDialog v-model="avisible" title="添加班级信息" :close-on-click-modal="false" @closed="requery">
    <div>
      <Elform v-loading="adding">
        <ElFormItem>
          <ElInput v-model="addInfo.cname"></ElInput>
        </ElFormItem>

        <ElFormItem>
          <ElInput v-model="addInfo.cinfo"></ElInput>
        </ElFormItem>
      </Elform>
    </div>

    <template #footer>
      <div>
        <ElButton @click="add" type="primary" v-loading="adding">添加</ElButton>
        <ElButton @click="avisible = false">关闭</ElButton>
      </div>
    </template>
  </ElDialog>

   <!-- 修改对话框 -->
   <ElDialog v-model="mvisible" title="修改班级信息" :close-on-click-modal="false" @closed="requery">
    <div>
      <Elform v-loading="modifying">
        <ElFormItem>
          <ElInput v-model="modifyinfo.cname"></ElInput>
        </ElFormItem>

        <ElFormItem>
          <ElInput v-model="modifyinfo.cinfo"></ElInput>
        </ElFormItem>
      </Elform>
    </div>

    <template #footer>
      <div>
        <ElButton @click="modify" type="primary" v-loading="modifying">保持</ElButton>
        <ElButton @click="mvisible = false" type="danger">关闭</ElButton>
      </div>
    </template>
  </ElDialog>

</template>
<script lang="ts" setup>
import { ref } from 'vue'
import ApiService from '../../ts/ApiService'
import Tools from '../../ts/Tools'
import { BaselistResult, PageInfo, BaseResult } from '../../ts/BaseResult'
import { Class } from '../../ts/Manage'
import { ElDialog, ElButton, ElMessageBox, ElPagination, ElTable, ElTableColumn } from 'element-plus'

const title = ref('班级管理')

//#region ========查询部分============
const loading = ref(false)
const page = ref(new PageInfo())
const list = ref(new Array<Class>())
const queryAInfo = ref({
  cname: '',
})

function reset() {
  queryAInfo.value = {
    cname: '',
  }
  requery()
}

function requery() {
  page.value.pageNumber = 1
  query()
}

function query() {
  loading.value = true
  ApiService.post('/manage/class/queryAll', Tools.concatJson(page.value, queryAInfo.value), (data: BaselistResult<Class>) => {
    loading.value = false
    if (data.success) {
      page.value = data.page
      list.value = data.list
      console.log('数据', list)
      return
    }
    ElMessageBox.alert(data.message, '班级管理')
  })
}
query()
//#endregion

//#region ==========添加部分===========
const addInfo = ref(new Class())
const adding = ref(false)
const avisible = ref(false)

function add() {
  adding.value = true
  ApiService.post('/manage/class/add', addInfo.value, (data: BaseResult) => {
    adding.value = false
    if (data.success) {
      ElMessageBox.alert(data.message, '班级添加')
    }
  })
}

//#endregion

//#region =========删除部分============
function del(info: Class) {
  ElMessageBox.confirm(`是否删除：${info.cname}？`)
    .then(() => {
      ApiService.post('/manage/class/delete', { cid: info.cid }, (data: BaseResult) => {
        if (data.success) {
          ElMessageBox.alert(data.message)
          requery()
        }
      })
    })
    .catch(() => {})
}
//#endregion =========================

//#region =========修改===============
const modifyinfo = ref(new Class())
const modifying = ref(false)
const mvisible = ref(false)

function showModify(info: Class) {
  modifyinfo.value = Tools.concatJson(info)
  mvisible.value = true
}

function modify() {
  modifying.value = true
  ApiService.post('/manage/class/update', modifyinfo.value, (data: BaseResult) => {
    modifying.value = false
    if (data.success) {
      ElMessageBox.alert(data.message)
    }
  })
}
//#endregion =========================
</script>
<style></style>
